<template>
  <div class="register-background">
    <div class="register-border">
      <div class="register-title">
        创建你的Beetles账户
      </div>
      <div class="register-content">
        <div class="register-form">
          <el-form ref="form" :model="form" :rules="rules" label-position="top" class="flex-form">
            <el-row :gutter="20">
              <el-col span="12">
                <el-form-item prop="realName" label="用户名:">
                  <el-input v-model="form.realName"></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item prop="email" label="商业邮箱:">
                  <el-input v-model="form.email"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col span="12">
                <el-form-item prop="phone" label="联系方式:">
                  <el-input v-model="form.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item v-if="form.tenantId == null" prop="tenantName" label="公司名称:">
                  <el-input  v-model="form.tenantName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col span="12">
                <el-form-item v-if="form.tenantId == null" prop="website" label="公司网址:">
                  <el-input  v-model="form.website"></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item v-if="form.tenantId == null" prop="title" label="公司头衔:">
                  <el-select v-model="form.postKey" style="width:100% ">
                    <el-option v-for="(item,index) in companyList" :key="index" :label="item.dictValue" :value="item.dictKey">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <div style="display: flex;margin-left: 10%">
              <el-form-item prop="isAgree">
                <el-checkbox  v-model="isAgree" style="width: 100%">
                </el-checkbox>
              </el-form-item>
              <div class="agree-title" @click="isAgree = !isAgree">
                我同意加入组织。并接受beetles<a href="">使用条款</a>和
                <a href="">隐私政策</a>中规定的条款。
              </div>
            </div>
            <div class="formButton" @click="signUp">创建Beetles账户</div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { registerUser } from '@/api/user'

export default {
  name: 'registerPage',
  props: [],
  data() {
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^\d+$|^\d+[.]?\d+$/;
      if (value === '') {
        callback(new Error('请输入联系方式'))
      } else if (!phoneReg.test(value)) {
        callback(new Error('请输入正确的联系方式!'))
      } else {
        callback()
      }
    }

    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9]+[-_.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[-_.]?)*[a-zA-Z0-9]+(\.[a-zA-Z]{2,})+$/;
      if (value === '') {
        callback(new Error('请输入商业邮箱'))
      } else if (!mailReg.test(value)) {
        callback(new Error('请输入正确的邮件格式!'))
      } else {
        callback()
      }
    }

    return {
      companyList:[],//公司头衔列表
      userType: '',//用户类型
      isAgree:false,
      form: {
        realName: null,
        email: null,
        phone: null,
        tenantName: null, // 公司名
        website: null,
        isAgency: null,
        tenantId:null,
        postKey:null,
      },
      rules: {
        realName: [{required: true, message: '请输入用户名', trigger: 'blur'},{max:10,message:'用户名不能超过10位'}],
        email: [
          {required: true, validator: checkEmail, trigger: 'blur'}
        ],
        phone: [
          {required: true, message:'请输入联系方式', trigger: 'blur'}
        ],
        tenantName: [{required: true, message: '请输入公司名称', trigger: 'blur'},{max:25,message:'公司名称不能超过25个字符长度'}],
        website: [{required: false, message: '请输入公司网址', trigger: 'blur'}]
      }
    }
  },
  created() {
    if(this.$route.query.tenantId){
      this.form.tenantId= this.$route.query.tenantId
    }
    this.userType = this.$route.query.type
    if (this.userType == 'agency') {
      this.form.isAgency = 1
    } else {
      this.form.isAgency = 0
    }

    this.companyList = [
      {dictValue:'管理员',dictKey:'admin'},
      {dictValue:'优化师',dictKey:'optimizer'},
      {dictValue:'客户经理',dictKey:'cm'},
      {dictValue:'设计师',dictKey:'designer'},
      {dictValue:'分析师',dictKey:'analyst'},
    ]
  },


  methods: {
    //注册
    signUp() {
      if (this.isAgree) {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            registerUser(this.form).then((res)=>{
              if(res.data.success){
                let exdate = new Date()
                exdate.setTime(exdate.getTime() + 24*60*60*1000*7)
                window.document.cookie = "userName" + "=" + this.form.email + ";path=/;expires="+exdate.toGMTString();
                this.$alert('注册成功，请耐心等待审核！',{
                  confirmButtonText:'确定',
                  callback:()=>{
                    this.$router.push({path:'/login'})
                  }
                })
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      } else {
        //提示点击确认
        this.$alert('请确认协议',{
          confirmButtonText:'确定',
        })
      }
    },

  }
}
</script>
<style lang="scss">
.el-form--label-top .el-form-item__label {
  padding: 0 !important;
}

a {
  color: #00a2ff;
}

.register-background {
  background-image: url('/img/bg/building.png');
  background-size: 100% 100%;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.register-border {
  background: rgba(100,100,100,0);
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
  display: block;
}

.register-title {
  background: white;
  width: 100%;
  font-family: Montserrat;
  font-size: 36px;
  font-weight: 800;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #51abe0;
  margin: 0 auto;
}

.register-form {
  background: white;
  width: 70%;
  margin: 0 auto;
  margin-top: 50px;
  box-shadow: 2px 2px 19px 2px rgba(0, 0, 0, 0.18);
  padding: 15px;
}

.formButton {
  cursor: pointer;
  background: #00a2ff;
  color: white;
  border-radius: 18px;
  text-align: center;
  margin: 0 auto;
  font-size: 22px;
  height: 33px;
  line-height: 30px;
  margin-top: 25px;
  width: 45%;
}

.formButton:hover{
  background: #51abe0;
}
.agree-title {
  margin-top: 2%;
  font-family: Montserrat;
  font-size: 14px;
  font-weight: normal;
  font-style: italic;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: normal;
  color: #646364;
  cursor: pointer;
}
</style>
